
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var numberOfSides = 6
        size = 40,
        Xcenter = 100,
        Ycenter = 100;
        var cxt;
        var canvas;
        var Polygon1=new Array();
        var Polygon2=new Array();

        var stat;

        function drawGameCanvas() {
            var Inter =new Intersection();
            Inter.init("cool");
            canvas = document.getElementById("gameBoard");
            cxt = canvas.getContext("2d");
            cxt.fillStyle = '#f00';
            cxt.beginPath();
            cxt.moveTo(0, 0);
            cxt.lineTo(100, 50);
            Polygon1.push(100);
            Polygon1.push(50);
            cxt.lineTo(50, 100);
            cxt.lineTo(0, 90);
            cxt.closePath();
            cxt.fill();
            cxt.fillStyle = '#ffffff';
            cxt.beginPath();
            cxt.moveTo(20, 20);
            cxt.lineTo(100, 50);
            Polygon2.push(100);
            Polygon2.push(50);
            cxt.lineTo(50, 100);
            cxt.lineTo(0, 90);
            cxt.closePath();
            cxt.fill();
           stat= Inter.intersectPolygonPolygon(Polygon1,Polygon2);


        }

        function Intersection(status) {
            if ( arguments.length > 0 ) {
                this.init(status);
            }
        }
        /*****
         intialize Intersection
         *****/
        Intersection.prototype.init = function(status) {
            // hold the status of the intersection
            this.status = status;
            // array to store the points
            this.points = new Array();
        };


        /*****
         add a single point
         *****/
        Intersection.prototype.addPoint = function(point) {
            this.points.push(point);
        };
        /*****
         *
         * To hold multiple points addPonits
         *
         *****/
        Intersection.prototype.addPoints = function(points) {
            this.points = this.points.concat(points);
        };

        /*****
         *
         *   Check intersection of line with a polygon
         *
         *****/
        Intersection.prototype.intersectLinePolygon = function(a1, a2, points) {
            var result = new Intersection("No Intersection");
            var length = points.length;

            for ( var i = 0; i < length; i++ ) {
                var b1 = points[i];
                var b2 = points[(i+1) % length];
                var inter = this.intersectLineLine(a1, a2, b1, b2);

                result.addPoints(inter.points);
            }

            if ( result.points.length > 0 ) result.status = "Intersection";

            return result;
        };


        /*****
         *
         * Check for intersection of a polygon with polygon
         *
         *****/
        Intersection.prototype.intersectPolygonPolygon = function(points1, points2) {
            var result = new Intersection("No Intersection");
            var length = points1.length;

            for ( var i = 0; i < length; i++ ) {
                var a1 = points1[i];
                var a2 = points1[(i+1) % length];
                var inter = this.intersectLinePolygon(a1, a2, points2);

                result.addPoints(inter.points);
            }

            if ( result.points.length > 0 )
                result.status = "Intersection";

            return result;

        };

        /*****
         *
         *   Check intersection of line with a line
         *
         *****/
        Intersection.prototype.intersectLineLine = function(a1, a2, b1, b2) {
            var result;

            var ua_t = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x);
            var ub_t = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x);
            var u_b  = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y);

            if ( u_b != 0 ) {
                var ua = ua_t / u_b;
                var ub = ub_t / u_b;

                if ( 0 <= ua && ua <= 1 && 0 <= ub && ub <= 1 ) {
                    result = new Intersection("Intersection");
                    result.points.push(
                            new Point2D(
                                    a1.x + ua * (a2.x - a1.x),
                                    a1.y + ua * (a2.y - a1.y)
                            )
                    );
                } else {
                    result = new Intersection("No Intersection");
                }
            } else {
                if ( ua_t == 0 || ub_t == 0 ) {
                    result = new Intersection("Coincident");
                } else {
                    result = new Intersection("Parallel");
                }
            }

            return result;
        };
        function Point2D(x,y){if(arguments.length>0){this.init(x,y);}}
        Point2D.prototype.init=function(x,y){this.x=x;this.y=y;};
        Point2D.prototype.min=function(that){return new Point2D(Math.min(this.x,that.x),Math.min(this.y,that.y));};
        Point2D.prototype.max=function(that){return new Point2D(Math.max(this.x,that.x),Math.max(this.y,that.y));};


    </script>
</head>
<body onload="drawGameCanvas()">
<h1>
    Polygon Collision detection
</h1>
<div>
    <canvas id="gameBoard" width="300" height="300">
    </canvas>
</div>
</body>
</html>
